<template>
	<view class="pages promoters">
		<view class="content_height">
			<fu-navbar :isBack="true" title="聚星团队" :bgColor="colorTheme" color="#ffffff"></fu-navbar>
		</view>
		<view class="list-wrap">
			<fu-scroll :scrollHeight="scrollHeight" @onRefresh="onRefresh" @onBottom="onBottom" ref="refresh"
				:isLoad="isLoad" :isData="isData">
				<!-- <scroll-view scroll-y="true" > -->
				<!-- 标题 -->
				<view class="list-item title flex justify-around align-center">
					<view :class="[{'margin_top': curFilter }]" class="list-item-time text-333">{{i18n['姓名']}}</view>
					<!-- <view  :class="[{'margin_top': curFilter }]" class="text-center list-item-time  text-333">{{i18n['人员类别']}}</view> -->
					<view class="  list-item-time text-333 flex">
						<view class="flex flex-direction text-right align-center justify-center sorting"
							@click="filterClick" :class="[{'active': curFilter }]">
							<!-- <view  v-if="!curFilter  || (order == 'asc')" class="scale top cuIcon-fold"></view>
              <view  v-if="!curFilter  || (order == 'desc')" class="scale bot cuIcon-unfold"></view> -->
						</view>
						<view class="orderDesc text-right" @click="filterClick(1)">{{i18n['加入时间']}}</view>
					</view>
				</view>
				<!-- 内容 -->
				<view v-for="(item,index) in dataList" :key="index" class="list-item flex justify-around align-center">
					<view class="list-item-time text-333 word-break-all text-cut padding-right-xs">
						{{item.user.user_nickname}}</view>
					<!-- <view  class="text-center list-item-time text-333 word-break-all text-cut padding-right-xs">直推</view> -->
					<view class="text-right list-item-time text-333 word-break-all text-cut">{{item.create_time}}</view>
				</view>
			</fu-scroll>
		</view>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import fuScroll from '../../components/fu-scroll/fu-scroll.vue';
	export default {
		components: {
			fuScroll
		},
		data() {
			return {
				curFilter: false,
				order: '',
				keyword: '',
				isSearch: true,
				scrollHeight: 0,
				isLoad: false,
				isData: 'more',
				dataContent: {},
				dataList: [],
				page: 1, // 页数
				size: 10, // 页条数
				total_push: 0
			};
		},
		mounted() {
			// let obj = uni.createSelectorQuery().in(this).select('.content_height');
			let that = this;
			this.$nextTick(function() {
				new Promise((reslove, reject) => {
					let pageHeight;
					let viewHeight;
					let heightData = {}
					uni.createSelectorQuery().in(this).select('.pages').boundingClientRect(function(data) {
						heightData.pageHeight = data.height;
						// console.log(data.height)
					}).exec();
					uni.createSelectorQuery().in(this).select('.content_height').boundingClientRect(
						function(data) {
							heightData.viewHeight = data.height;
							// console.log(data.height)
						}).exec();

					setTimeout(() => {
						reslove(heightData)
					}, 500)
				}).then(res => {
					// console.log(res);
					that.scrollHeight = Math.floor(res.pageHeight - res.viewHeight);
					// console.log(Math.floor(res.pageHeight - res.viewHeight))
				})

			})


		},
		onLoad() {
			// this.getContent()
			this.handleSearch()
		},

		methods: {
			//主数据
			getContent() {
				this.$api.post(global.apiUrls.postDistributionPerson, {
						user_id: global.userInfo && global.userInfo.id || 0,
					}).then(res => {
						console.log('推广人统计', res);
						if (res.data.code == 1) {
							this.dataContent = res.data.data
						} else {
							this.$message.error(res.data.msg)
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			filterClick(type) {
				if (type == 1) {
					this.curFilter = false
					this.order = ''
					this.onRefresh()
					return
				}
				this.curFilter = true
				if (this.order == 'asc') {
					this.order = 'desc'
				} else {
					this.order = 'asc'
				}
				this.onRefresh()
			},
			// 搜索
			handleSearch(isPull = false) {
				if (this.isData != 'more') return;
				this.isData = 'more';
				this.isLoad = true;
				let data = {
					sort: this.order,
					user_id: global.userInfo.id || 0,
					keywords: this.keyword,
					page: this.page,
					list_rows: this.size,
				}
				this.$api.post(global.apiUrls.postTeamList, data)
					.then(res => {
						if (isPull) this.$refs.refresh.close();

						if (res.data.code == 1) {
							let totalSize = res.data.data.total;
							this.total_push = totalSize;
							let list = res.data.data.data;
							if (this.page == 1) {
								this.dataList = [];
							};
							if (this.page == 1 && list.length == 0) {
								this.isData = 'noData';
								this.isLoad = false;
								return
							}
							this.dataList = this.dataList.concat(list);
							if (this.dataList.length >= totalSize) {
								this.isData = 'noMore';
							} else {
								this.isData = 'more';
								this.page++;
							}

						} else {
							this.isData = 'noData';
							this.$message.error(res.data.msg);
						}

						this.isLoad = false;
					}).catch(err => {
						if (isPull) this.$refs.refresh.close();
						this.isLoad = false;
						this.isData = 'noData';
						console.log(err)
						this.$message.error(err);
					})
			},
			clear() {
				this.keyword = '';
				this.onRefresh()
			},
			// 刷新
			onRefresh() {
				console.log('刷新')
				let that = this;
				this.page = 1;
				this.isData = 'more';
				this.handleSearch(true);
			},
			// 加载
			onBottom() {
				// console.log('加载更多')
				this.handleSearch();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text-right {
		text-align: right;
	}

	.text-center {
		text-align: center;
	}

	.row-reverse {
		flex-direction: row-reverse;
	}

	.active {
		color: $theme !important;
	}

	.sorting {
		padding-left: 10rpx;

		.top {
			transform: translateY(8rpx) scale(0.65);
		}

		.bot {
			transform: translateY(-4rpx) scale(0.65);
		}
	}

	.orderDesc {
		padding-top: 10rpx // position: relative;

	}

	.margin_top {
		margin-top: 14rpx;
	}

	.pages {
		background: #ffffff;
		// position: relative;
		// z-index: -2;
		height: 100vh;
		overflow: hidden;
	}

	.header-wrap {
		height: 320rpx;
		position: relative;
		overflow: hidden;

		.header-bg {
			width: 2000rpx;
			height: 2000rpx;
			position: absolute;
			bottom: 0;
			left: -625rpx;
			background: $theme;
			border-radius: 50%;
			z-index: 1;
		}

		.header-info {
			position: relative;
			z-index: 2;
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 30rpx;

			.header-money {
				font-size: 60rpx;
			}

			.header-title {
				margin-top: 20rpx;
			}
		}
	}

	.item-wrap {
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: -120rpx;

		.item-content {
			height: 150rpx;
			border-radius: 24rpx;
			background: #ffffff;
			text-align: center;
			box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.3);

			.item-num {
				font-size: 48rpx;
				margin-bottom: 10rpx;
			}

			.item-title {
				font-size: 24rpx;
			}

			.item-line {
				width: 1rpx;
				height: 44rpx;
				background: #eeeeee;
			}
		}
	}

	.list-wrap {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.list-item {
			&.title {
				margin-top: 20rpx;
				font-weight: bold;
			}

			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 24rpx;

			.list-item-title {
				font-size: 28rpx;
				line-height: 60rpx;
				height: 60rpx;
			}

			.list-item-time {
				width: calc(100% / 3);
				font-size: 24rpx;
				flex-shrink: 0;
				// line-height: 48rpx;
				// height: 48rpx;
			}

			.list-item-right {
				color: $theme;
				font-size: 36rpx;
			}
		}
	}

	.item-center {
		text-align: right;
		position: relative;
		right: -40rpx;
	}


	.search-form {
		background-color: #f5f5f5;
		line-height: 64upx;
		height: 64upx;
		font-size: 24upx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 20rpx 32upx;
		position: relative;
		z-index: 2;
	}

	.search-form+.action {
		margin-right: 30upx;
	}

	.search-form input {
		flex: 1;
		padding-right: 30upx;
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		background-color: transparent;
	}

	.search-form [class*="cuIcon-"] {
		margin: 0 0.5em 0 0.8em;
	}

	.search-form [class*="cuIcon-"]::before {
		top: 0upx;
	}
</style>